<template>
  <section class="recommended-stations">
    <div class="section-header">
      <h2>{{ title }}</h2>
      <button class="more-btn" @click="handleMore">查看更多 →</button>
    </div>
    <div class="station-cards">
      <div 
        class="station-card" 
        v-for="station in stations" 
        :key="station.code"
        @click="handleSelect(station)"
      >
        <div class="card-header">
          <span class="station-type" :class="station.type">{{ station.typeLabel }}</span>
          <span class="station-status" :class="station.status">{{ station.statusLabel }}</span>
        </div>
        <h3 class="station-name">{{ station.name }}</h3>
        <p class="station-code">{{ station.code }}</p>
        <div class="station-meta">
          <span class="meta-item">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
              <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
            </svg>
            {{ station.location }}
          </span>
          <span class="meta-item">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
              <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
            </svg>
            {{ station.updateTime }}
          </span>
        </div>
        <div class="card-data" v-if="station.latestData">
          <div class="data-item">
            <span class="data-label">水位</span>
            <span class="data-value">{{ station.latestData.waterLevel }}m</span>
          </div>
          <div class="data-item">
            <span class="data-label">流量</span>
            <span class="data-value">{{ station.latestData.flow }}m³/s</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '推荐测站'
  }
})

const emit = defineEmits(['select', 'more'])

// 推荐测站数据（TODO: 需要从API获取）
const stations = ref([
  { 
    code: 'BLH001', 
    name: '碧流河水库', 
    type: 'reservoir', 
    typeLabel: '水库',
    status: 'normal',
    statusLabel: '正常',
    location: '大连市',
    updateTime: '10分钟前',
    latestData: { waterLevel: 125.6, flow: 234.5 }
  },
  { 
    code: 'SHJ002', 
    name: '松花江哈尔滨站', 
    type: 'river', 
    typeLabel: '河流',
    status: 'warning',
    statusLabel: '预警',
    location: '哈尔滨市',
    updateTime: '5分钟前',
    latestData: { waterLevel: 118.2, flow: 1520.8 }
  },
  { 
    code: 'DHF003', 
    name: '大伙房水库', 
    type: 'reservoir', 
    typeLabel: '水库',
    status: 'normal',
    statusLabel: '正常',
    location: '抚顺市',
    updateTime: '15分钟前',
    latestData: { waterLevel: 132.1, flow: 89.3 }
  },
])

// 加载推荐测站（TODO: 实现API调用）
async function loadStations() {
  // TODO: 调用API获取推荐测站
  // const data = await getRecommendedStations()
  // stations.value = data
}

function handleSelect(station) {
  emit('select', station)
}

function handleMore() {
  emit('more')
}

onMounted(() => {
  loadStations()
})
</script>

<style scoped>
.recommended-stations {
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}

.more-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.more-btn:hover {
  color: #00d4ff;
}

.station-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.station-card {
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.station-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 212, 255, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.station-type {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.station-type.reservoir {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.station-type.river {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.station-status {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.station-status.normal {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.station-status.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.station-name {
  font-size: 18px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 8px 0;
}

.station-code {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px 0;
  font-family: 'Monaco', 'Consolas', monospace;
}

.station-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #94a3b8;
}

.meta-item svg {
  opacity: 0.7;
}

.card-data {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-label {
  font-size: 12px;
  color: #64748b;
}

.data-value {
  font-size: 16px;
  font-weight: 600;
  color: #00d4ff;
}

@media (max-width: 1024px) {
  .station-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .station-cards {
    grid-template-columns: 1fr;
  }
}
</style>

